<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<script>
			function hideFn(){
				$("#showDiv").fadeOut(2000);//2秒钟淡出
			}
			function showFn(){
				$("#showDiv").fadeIn(3000);
			}
			function toggleFn(){
				$("#showDiv").fadeToggle(2000);
			}
			function toggleFn2(){
				$("#showDiv2").fadeToggle(2000);
			}
			//透明的改变
//			function toggleFn(){
//				$("#showDiv").fadeTo(3000,0.5);
//			}

			//定义一个for循环
			for(var i = 0;i < 10;i ++){
				toggleFn2();
			}
			$("#btn3").click(function(){
				//改变当前正在执行的所有动画的颜色
				$(":animated").css("background-color","darkgreen");
			})
		</script>
	</head>
	<body>
		<input type="button" value="点击div隐藏" onclick="hideFn()"/>
		<input type="button" value="点击div显示" onclick="showFn()"/>
		<input type="button" value="点击div隐藏和显示切换" onclick="toggleFn()"/>
		<input type="button" value="点击div隐藏和显示切换" onclick="toggleFn2()"/>
		<div id="showDiv" style="width: 300px;height: 300px;background-color: red;">
			div显示和隐藏
		</div>
		<div id="showDiv2" style="width: 300px;height: 300px;background-color: red;">
			div显示和隐藏
		</div>
		
	</body>
</html>
